
<template>
  <div class="main-container">
    <div class="filtrate-bar">
      <div class="title-box">
        <div class="icon-box">
          <span class="wk wk-my-task icon" />
        </div>
        <span class="text">{{ reportTitle }}</span>
        <a-radio-group
          @change="changeMonthYear"
          v-model="dataType"
          :style="{ marginBottom: '8px', marginLeft: '10px' }"
        >
          <a-radio-button value="month">月度 </a-radio-button>
          <a-radio-button value="year"> 年度 </a-radio-button>
        </a-radio-group>
      </div>
    </div>

    <div class="content">
      <div class="axis-content">
        <div id="axismain" />
      </div>
      <div class="table-content">
        <div class="handle-bar">
          <a-button class="export-btn" type="primary" icon="download" @click="handleExportXls">导出</a-button>
        </div>
        <a-table :scroll="{ y: 340 }" :columns="fieldList" :data-source="tableList" :pagination="false" />
      </div>
    </div>
  </div>
</template>

<script>
import { postAction, downFile } from '@/api/manage'
import * as echarts from 'echarts'

export default {
  name: 'statistics',
  data() {
    return {
      reportId: '',
      reportTitle: '',
      dataType: 'month',
      loading: false,
      axisOption: null,
      postParams: {}, // 筛选参数
      dataIndex: null,
      list: [],

      tableList: [],
      fieldList: [],
      keyList: [],

      chartData: [],
      itemList: [],

      chartData2: [],
      itemList2: [],

      url: {
        executeGraphReport: '/online/api/executeGraphReport',
        exportXlsUrl: '/online/api/export/exportXlsGraphReport',
      },
    }
  },
  computed: {
    // 列表请求参数
    listPostParams() {
      const params = { ...this.postParams }
      return params
    },
  },
  watch: {
    $route(to, from) {
      this.tableList = []
      this.fieldList = []
      this.keyList = []

      this.chartData = []
      this.itemList = []

      this.chartData2 = []
      this.itemList2 = []

      this.getDataIno()
      setTimeout(() => {
        this.initAxis()
        //柱状图数据
        this.getReportList()
      }, 500)
    },
  },
  mounted() {
    this.getDataIno()
    setTimeout(() => {
      this.initAxis()
      //柱状图数据
      this.getReportList()
    }, 500)
  },
  methods: {
    changeMonthYear() {
      if (this.dataType == 'month') {
        this.getReportList()
        this.postParams.reportField = ''
        this.tableList = this.itemList
      } else {
        this.getReportList2()
        this.tableList = this.itemList2
        this.postParams.reportField = 'reportTableSql2'
      }
    },
    // 导出表格
    handleExportXls(fileName) {
      if (!fileName || typeof fileName != 'string') {
        fileName = '导出文件'
      }
      let param = { id: this.reportId }
      downFile(this.url.exportXlsUrl, param).then((data) => {
        if (!data) {
          this.$message.warning('文件下载失败')
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
        } else {
          let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName + '.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link) //下载完成移除元素
          window.URL.revokeObjectURL(url) //释放掉blob对象
        }
      })
    },
    /**
     * 搜索点击
     */
    searchClick(params) {
      this.postParams = params
      this.getData()
      setTimeout(() => {
        //柱状图数据
        this.getReportList()
      }, 500)
    },
    async getDataIno() {
      this.loading = true
      this.reportId = this.$route.params.code
      const res = await postAction(this.url.executeGraphReport, { id: this.reportId })
      this.reportTitle = res.result.reportName

      this.chartData = res.result.chartData
      this.itemList = res.result.itemList
      this.tableList = this.itemList

      this.keyList = res.result.itemListKeyList
      this.keyList.forEach((item, index) => {
        this.fieldList.push({ title: this.keyList[index], dataIndex: this.keyList[index], key: this.keyList[index] })
      })

      this.chartData2 = res.result.chartData2
      this.itemList2 = res.result.itemList2
    },
    /**
     * 图表数据   待完善
     */
    getReportList() {
      const dealData = []
      const numData = []
      const legendData = []
      for (let index = 0; index < this.chartData.length; index++) {
        const element = this.chartData[index]
        numData.push(element.key)
        legendData.push(element.value)
      }
      //横坐标
      this.axisOption.xAxis[0].data = legendData
      //数据值
      this.axisOption.series[0].data = numData
      this.chartObj.setOption(this.axisOption, true)
    },

    getReportList2() {
      const dealData = []
      const numData = []
      const legendData = []
      for (let index = 0; index < this.chartData2.length; index++) {
        const element = this.chartData2[index]
        numData.push(element.key)
        legendData.push(element.value)
      }
      //横坐标
      this.axisOption.xAxis[0].data = legendData
      //数据值
      this.axisOption.series[0].data = numData
      this.chartObj.setOption(this.axisOption, true)
    },
    /** 柱状图 */
    initAxis() {
      this.chartObj = echarts.init(document.getElementById('axismain'))
      this.axisOption = {
        color: ['#6ca2ff', '#ff7474'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          top: '50px',
          left: '50px',
          right: '50px',
          bottom: '40px',
          containLabel: true,
          borderColor: '#fff',
        },
        xAxis: [
          {
            type: 'category',
            name: '销售员',
            data: [],
            axisTick: {
              alignWithLabel: true,
              lineStyle: { width: 0 },
            },
            axisLabel: {
              color: '#333',
            },
            /** 坐标轴轴线相关设置 */
            axisLine: {
              lineStyle: { color: '#333' },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '合同合计',
            axisTick: {
              alignWithLabel: true,
              lineStyle: { width: 0 },
            },
            axisLabel: {
              color: '#333',
              formatter: '{value} 个',
            },
            /** 坐标轴轴线相关设置 */
            axisLine: {
              lineStyle: { color: '#333' },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '新增客户数',
            type: 'bar',
            yAxisIndex: 0,
            barMaxWidth: 15,
            data: [],
          },
        ],
      }
    },

    /**
     * 导出点击
     */
    exportClick() {
      this.requestExportInfo(biCustomerTotalListExportAPI, this.listPostParams)
    },
  },
}
</script>


<style lang="less" scoped>
.main-container {
  border: 1px solid #e6e6e6;
  border-radius: 2px;
  background-color: white;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}

.filtrate-bar {
  background-color: white;
  padding: 15px 20px 5px 20px;
  margin-right: 15px;
  line-height: 34px;
  .icon-box {
    width: 34px;
    height: 34px;
    text-align: center;
    line-height: 34px;
    color: #168a40;
    background-color: #dfe8ff;
    border-radius: 50%;
    margin-right: 10px;
    float: left;
  }
  .text {
    font-size: 17px;
    font-weight: 700;
  }
}

.content {
  height: calc(100% - 54px);
  overflow-y: auto;
  padding: 10px 0;
}

.content-title {
  padding: 10px 20px 5px;
  font-size: 16px;
  color: #333;
}

.axis-content {
  padding: 20px 10% 40px;
  position: relative;
  .axismain,
  #axismain {
    margin: 0 auto;
    width: 95%;
    height: 400px;
  }
}

.table-content {
  padding: 0 60px 20px 60px;
}

.export-button {
  float: right;
  margin-right: 22px;
}

// 导出操作bug
.handle-bar {
  margin-bottom: 8px;
  text-align: right;
}

.search-box {
  padding-right: 15px;
}

.radio-box {
  padding: 0 20px;
  margin-bottom: 15px;
  /deep/ .el-radio__label {
    color: #99a9bf !important;
  }
}

.static {
  padding: 0 20px;
  margin-bottom: 10px;
  .text {
    font-size: 13px;
    color: #99a9bf;
    display: inline-block;
  }
  .text:not(:last-child) {
    margin-right: 15px;
  }
}
/deep/ .ant-table-wrapper {
  height: 400px;
  border: 1px solid #ebeef5;
}
/deep/ .ant-table-placeholder {
  display: none;
}
</style>

